<template>
  <el-drawer
    v-model="drawerVisible"
    :size="650"
    title="高级查询"
    @closed="$emit('closed')"
    append-to-body
  >
    <el-container v-loading="saveLoading">
      <el-main>
        <el-form
          :model="form"
          :rules="rules"
          ref="saveForm"
          label-width="140px"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="属地" prop="block">
            <hh-dict
              v-model="form.block"
              dictType="block"
              placeholder="请选择属地"
              clearable
              filterable
            ></hh-dict>
          </el-form-item>
          <el-form-item label="电话号码" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请输入电话号码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input
              v-model="form.mobile"
              placeholder="请输入手机号码"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              placeholder="请输入邮箱"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号码" prop="idCard">
            <el-input
              v-model="form.idCard"
              placeholder="请输入身份证号码"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <div class="form-footer">
          <!-- <el-button type="" @click="close">取消</el-button> -->
          <el-button type="" @click="clear">清空查询条件</el-button>
          <el-button type="primary" @click="submit">查询</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>
export default {
  name: "user-filter",
  emits: ["success", "closed"],
  data() {
    return {
      drawerVisible: false,
      form: {
        name:"",
        block:"",
        phone:"",
        mobile:"",
        email:""
      },
      rules: {
        // roleName: [{ required: true, message: "请输入企业名称" }],
      },
    };
  },
  watch: {},
  mounted() {},
  methods: {
    //打开
    open(search){
        this.drawerVisible = true;
        Object.assign(this.form, search);
    },
    //提交
    submit() {
      this.$refs.saveForm.validate(async (valid) => {
        if (valid) {
          this.$emit("onRefresh",this.form);
          this.close()
        }
      });
    },
    //表单注入数据
    clear() {
      let form = {
        name:"",
        phone:"",
        block:"",
        mobile:"",
        email:"",
        idCard:""
      }
      Object.assign(this.form, form);
    },
    // 关闭页面
    close() {
      this.$emit("closed");
    },
  },
};
</script>

<style></style>
